<template>
<el-table :data="gethtml" style="width: 100%">
    <el-table-column prop="proDuctionid" label="序号" />
    <el-table-column prop="goodName" label="商品名称"  >
      <template #default="{row}">
        <a style="color: black;" @click="Goodsdetails(row.proDuctionid)">{{ row.goodName }}</a>
      </template>
    </el-table-column>
    <el-table-column prop="productionBath" label="生产批次" />
    <el-table-column prop="expirationtime" label="保质期（天）" />
    <el-table-column prop="proDuctionNum" label="生产许可证"  />
    <el-table-column prop="proDuctionenterprise" label="生产企业" />
    <el-table-column prop="getTheyperfect" label="完善程度" >
      <template #default="scope">
        <el-text v-if="scope.row.getTheyperfect=='100%'" style="color: chartreuse;">{{ scope.row.getTheyperfect }}</el-text>
        <el-text v-else style="color:red;">{{ scope.row.getTheyperfect }}</el-text>
      </template>
    </el-table-column>
    <el-table-column prop="foundName" label="创建人"  />
    <el-table-column prop="foundTime" label="创建时间" />
    <el-table-column prop="foundName" label="修改人" />
    <el-table-column prop="address" label="操作" >
      <template #default="{row}">
        <a style="color: blue;">详情</a>
        <a style="color: blue;">修改</a>
        <a style="color: blue;">导出</a>
        <a style="color: blue;">删除</a>
      </template>
    </el-table-column>
  </el-table>
      <div style="float: left;"><el-button @click="useGlobalSize(10)" >10</el-button>
        <el-button @click="useGlobalSize(15)">15</el-button>
        <el-button @click="useGlobalSize(30)">30</el-button>
        <el-button @click="useGlobalSize(50)">50</el-button>
        <el-button @click="useGlobalSize(100)">100</el-button></div>
      <div style="float: right;">
        <el-pagination
        v-model:current-page="from.pageindex"
        v-model:page-size="from.pagesize"
        :page-sizes="[100, 200, 300, 400]"
        :background="from"
        layout="total, prev, pager, next"
        :total="from.count"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
    <el-button @click="GoONE()">首页</el-button>
    </el-pagination>
      </div>

</template>
<script lang="ts" setup>
import { useRouter } from 'vue-router';
import axios from 'axios';
import { onMounted, reactive, ref } from 'vue';
const router=useRouter()

const from=reactive({
  pageindex: 1,
  pagesize: 2,
  count:0,
  page:0
})

onMounted(()=>{
  getSource()
})

const gethtml=ref()
const getSource=(()=>{
  axios.post('https://localhost:7116/api/SourceController1/SourceHtml',{

    pageindex: from.pageindex,
    pagesize: from.pagesize

  }).then(res=>{
      gethtml.value=res.data.data.data
      from.count=res.data.data.count
      from.page=res.data.data.page
    console.log(res.data.data)
  })

})

const GoONE=(()=>{



})



const Goodsdetails=((xid:any)=>{
    //为了方便取值
    localStorage.setItem('Details',xid);
    router.push('/Culturehtml');
})


const useGlobalSize=((num:any)=>{

  from.pagesize=num;
  from.pageindex=1;
  getSource()
})

const handleSizeChange = (val: number) => {
    from.pagesize=val;
    from.pageindex=1;
    getSource()
}
const handleCurrentChange = (val: number) => {
  from.pageindex=val;
   getSource()
}


</script>
<style scoped>
.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
</style>